<template>
	<div class="container">


		<div class="title">
			<el-button type="primary" v-if="this.params" size="small" @click="cancel" >返回</el-button>
			<router-link :to="{path:'/educa/banji',query: {iid:bjid,bjmc:add}}">
				<el-button type="primary" size="small" >日历课表</el-button>
			</router-link>
			<h2>{{add}}班级课表</h2>
		</div>

		<!-- 数据表格展示区域 -->
        <el-table
            :data="dataList"
            stripe
            border
            align="center"
            class="admin-table">


            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in portTitleList"
                align="center"
                show-overflow-tooltip
                v-if="v.hide != 0"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :formatter="v.formatter"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth "
                :header-align="v.headerAlign || 'center'"
                >
            </el-table-column>

            <el-table-column
                label="操作"
                width="360"
                align="center"
                fixed="right">
                <template scope="scope">
                    <el-button size="small" type="primary" :disabled = 'scope.row.issk =="Y"' @click="up(scope)">向上顺延</el-button>
                    <el-button size="small" type="primary" :disabled = 'scope.row.issk =="Y"' @click="down(scope)">向下顺延</el-button>
                    <el-button size="small" type="primary" :disabled = 'scope.row.issk =="Y"' @click="supplyCourse(scope)">代课</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog    title="代课"    :append-to-body="true"     :visible.sync="dialogVisible"   >
					<!-- <el-dialog visible width="50%"  :show-close="false" :append-to-body="true"  :close-on-click-modal="false"> -->

        <!-- <i class="el-icon-close close" @click="cancel1" style="color: white; z-index:10;"></i> -->
		 <!-- <div class="bt">代课</div> -->
            <el-form ref="form" :model="form" label-width="100px" class=" form" label-position="center">
                <el-form-item label="教室名称" >
                    <el-input disabled v-model="form.classroomName"class="select-block"></el-input>
                </el-form-item>
                <el-form-item label="选择老师" >
                    <el-select v-model="lsmc" placeholder="请选择老师"class="select-block" >
                        <el-option :label="v.mc" :value="v.id" v-for="v in lsboxlist"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="代课描述" class="select-block">
                    <el-input type="textarea" v-model="form.intro" :rows="3"class="select-block"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="submit" @click="submit">确认</el-button>
        </el-dialog>

        <StudentTableComponent v-if="componentList.student.toggle"  @close="componentsHide"  :params="componentList.student.params"></StudentTableComponent>
	</div>
</template>

<script type="text/javascript">
    import StudentTableComponent from './student-table'
    import qs from 'qs'
	export default {
        props: ['params'],
        components:{StudentTableComponent},
		data () {
			return {
				add:'',
				bjid:'',
				isReplace: false,
                dialogVisible: false,
				lsmc:'',
                teacherList: [],
                form: {
                    classroomName: '',
                    classroomID: '',
                    intro: '',
                    teachers: '',
                },
				lsboxlist:[],
                dataList: [],  //表格数据
                componentList: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                    student:{
                    	type:'student',
                    	toggle: false,
                    	params:'',
                    	data: {}
                    }
                },
                portTitleList: [
                    {
                        prop:'id',
                        label:'ID',
                        hide:0,
                        align:'center'
                    },
                    {
                        prop:'sj',
                        label:'日期',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'week',
                        label:'周几',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
//                      formatter: function(row,column) {
//                          // console.log(row)
//                          if (row.week == 1) {
//                              return '周一'
//                          }else if(row.week == 2) {
//                              return '周二'
//                          }else if(row.week == 3) {
//                              return '周三'
//                          }else if(row.week == 4) {
//                              return '周四'
//                          }else if(row.week == 5) {
//                              return '周五'
//                          }else if(row.week == 6) {
//                              return '周六'
//                          }else if(row.week == 0) {
//                              return '周日'
//                          }else {
//                              return ''
//                          }
//                      }
                    },
                    {
                        prop:'sjd',
                        label:'时间段',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },

                    {
                        prop:'jsmc',
                        label:'教室',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'day',
                        label:'序号(day)',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
										{
												prop:'kqls',
												label:'考勤老师',
												hide:1,
												align:'center',
												fixed:false,
												width:'',
												minWidth:'',
												headerAlign:'center'
										},
										{
												prop:'issk',
												label:'是否上课',
												hide:1,
												align:'center',
												fixed:false,
												width:'',
												minWidth:'',
												headerAlign:'center'
										},

                ],


			}
		},
        created () {
            console.log(this.params);

						if(this.params){
							this.add=this.params.row.mc;
							this.bjid=this.params.row.bjid;
						}else if(this.$route.query.bjmc){
							this.add=this.$route.query.bjmc;
							this.bjid=this.$route.query.iid;
						}
            this.getCourseList();
        },
		methods: {
//			tableRowClassName (row, index) {//隔行变色颜色设置
//              // console.log(row)
//              if ( index%4 == 0) {
//                  return "table-cell-red";
//              }else if( index%4 == 1 ){
//                  return "table-cell-yellow";
//              }else if( index%4 == 2 ){
//                  return "table-cell-green";
//              }else{
//                  return "table-cell-blue"
//              }
//          },
			cancel () {
				this.$emit('close',{type:'course',cancel:true})
			},
			cancel1 () {
			    this.dialogVisible=false;
			},

            submit () {
            	var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                      id: this.form.classroomID,
                        dkls: this.lsmc,
                        ms: this.form.intro,
												// dklsgh:v.gh,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/update',  params2 )
                 .then(res => {
                 	if(res.data.code == 1) {
 								this.$emit('close', { type: 'info', cancel: false });
 								this.$store.state.loading = false;
 							} else {
 							this.$message.warning(res.data.msg);
 								this.$store.state.loading = false;
 							}
                 }).catch(res => {
					 this.$message.warning("服务器异常");
 							this.$store.state.loading = false;
				})



//              this.dialogVisible = false;
//              this.axios.get(this.$store.state.api + 'pk/update', {
//                  params: {
//                      id: this.form.classroomID,
//                      dkls: this.lsmc,
//                      ms: this.form.intro,
//												// dklsgh:v.gh,
//                  }
//              }).then ( res => {
//                  console.log(res)
//              }).catch( res => {
//                  console.log(res)
//              })
            },

            up (scope) {
             var params2 = qs.stringify({
                      id: scope.row.id
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/up',  params2 )
                 .then(res => {
                 console.log(res)
                    if (res.data.code == 1) {
                        this.getCourseList()
                    }
                 }).catch(res => {
					 console.log(res)
				})




//              this.axios.get(this.$store.state.api + 'pk/up', {
//                  params: {
//                      id: scope.row.id
//                  }
//               }).then( res => {
//                  console.log(res)
//                  if (res.data.code == 1) {
//                      this.getCourseList()
//                  }
//               }).catch( res => {
//                  console.log(res)
//               })
            },
						ls () {
							var logininfo = JSON.parse(localStorage.logininfo);
					             var params2 = qs.stringify({
					                     yhid: logininfo.id,
										xxid: logininfo.xxid
				               })
				             //执行
				                 this.axios.post(this.$store.state.api + 'ls/getlslist',  params2 )
				                 .then(res => {
				                let data = res.data.data.list;
										this.lsboxlist = data;
				                 }).catch(res => {
								})





//							var logininfo = JSON.parse(localStorage.logininfo);
//								this.axios.get(this.$store.state.api + 'ls/getlslist', {
//									params: {
//										yhid: logininfo.id,
//										xxid: logininfo.xxid
//									}
//								 }).then( res => {
//									 let data = res.data.data.list;
//										this.lsboxlist = data;
//								 }).catch( res => {
//
//								 })
						},
            down (scope) {
             var params2 = qs.stringify({
                       id: scope.row.id
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/down',  params2 )
                 .then(res => {
                 console.log(res)
                    if (res.data.code == 1) {
                        this.getCourseList()
                    }
                 }).catch(res => {
					 console.log(res)
				})





//               this.axios.get(this.$store.state.api + 'pk/down', {
//                  params: {
//                      id: scope.row.id
//                  }
//               }).then( res => {
//                  console.log(res)
//                  if (res.data.code == 1) {
//                      this.getCourseList()
//                  }
//               }).catch( res => {
//                  console.log(res)
//               })
            },

            supplyCourse(scope) {
                console.log(scope)
                console.log(222)

                this.dialogVisible = true;
                this.form.classroomName = scope.row.jsmc;
                this.form.classroomID = scope.row.id
								this.ls();
            },

            getCourseList () {
            	var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                         bjid: this.bjid,
						yhid:logininfo.id+'',
						xxid:logininfo.xxid+'',
                        // bjid: 158
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/bjkb',  params2 )
                 .then(res => {
                  console.log('1111',res)
//                  console.log(123)
                    this.$store.state.loading = false;
                    this.dataList = res.data.data;
                 }).catch(res => {
					 console.log(res);
                    // this.$store.dispatch('showAlert',res.data.msg);
                    this.$store.state.loading = false;
				})




//              this.$store.state.loading = true;
//				var logininfo = JSON.parse(localStorage.logininfo);
//              this.axios.get(this.$store.state.api + 'pk/bjkb', {
//                  params: {
//                      bjid: this.bjid,
//						yhid:logininfo.id+'',
//						xxid:logininfo.xxid+'',
//                      // bjid: 158
//                  }
//              }).then ( res => {
//                  console.log('1111',res)
////                  console.log(123)
//                  this.$store.state.loading = false;
//                  this.dataList = res.data.data;
//              }).catch( res => {
//                  console.log(res);
//                  // this.$store.dispatch('showAlert',res.data.msg);
//                  this.$store.state.loading = false;
//              })s
            },

            componentsFn (type) {
                if (type == "replace") {
                    this.isReplace = true;
                }
            },
            close (bol) {
                // console.log(bol)
                if (bol) {
                    this.isReplace = false;
                }
            },
             /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.componentList ) {
                    if (type == this.componentList[i].type) {

                        this.componentList[i].toggle = true;
                        this.componentList[i].params = data;

                        if (this.componentList[i].data.type == 'single') {
                            this.componentList[i].data.index = data.row.id

                        }else if(this.componentList[i].data.type == 'multiple'){
                            this.componentList[i].data.index = this.multipleDelNum;

                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
            componentsHide (setting) { //关闭组件
                for ( let i in this.componentList ) {
                    if (setting.type == this.componentList[i].type) {
                        this.componentList[i].toggle = false;

                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }
		}
	}
</script>

<style lang="less" scoped>
.submit {
		width: 120px;
		display: block;
		margin:0 auto;
}
.container{
	height: 100%;
	position: absolute;
.wrap {
		text-align: center;
	}
	.bt{
		position: absolute;
		top: 0;
		left: 0;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			background: #50BFFF;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.select-block {
		width: 85%;
	}

	.title {
		margin-top: 10px;
		h2 {
			margin-left: 30%;
			line-height: 50px;
			font-size:25px;
			text-align: center;
			display: inline-block;
		}
		.btn1 {
		text-align: left;
		margin-left: 10px;
	}
	}

		.form{
			text-align: center;
		}
	/*.list-page {
    font-size: 12px;
    position: relative;
    width: 100%;
    height: 100%;
}*/
		}
</style>
